<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"  src="CommonUtil/CommonUtil.js"></script>
    <script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script>
    <script type="text/javascript" charset="utf-8">
        //桥接模式：主要作用就是把抽象和现实分离开来，使他们可以完全独立变化
        //应用场景，事件监听回调机制
        //用户点击一个按钮，向服务器发送信息
        //当页面加载完毕，执行函数体
        $(function () {
            /**
             *前台业务逻辑
             */
            var inp =document.getElementById('inp');
            //用事件注册的方式，向元素添加事件
            BH.EventUtil.addHandler(inp,'click',sendReq);
            /**
             * 后台业务逻辑
             */
            function  sendReq() {
                //ajax
//                $.post('URL',{msg:this.value},function (result) {
//                    //CallBack
//                });
                alert('发送了指定数据到后台：'+this.value);
            }
        });
    </script>
</head>
<body>
    <input id="inp" type="button" value="我是数据..."></body>
</html>